<template>
  <div style="display: inline-block">
    <component
      :is="loadSome"
      v-if="oss && maxLength > 1"
      v-model="img"
      v-bind="$props"
      @getName="getName"
    />
    <component
      :is="uploadSingle"
      v-else-if="maxLength === 1"
      v-model="img"
      v-bind="$props"
      @getImgInfo="getImgInfo"
      @getName="getName"
    />
    <component :is="loadMore" v-else v-bind="$props" @view="view" />
  </div>
</template>
<script>
import uploadSingle from '@/components/uploadImg/uploadSingle'
import loadMore from '@/components/uploadImg/loadMore'
import loadSome from '@/components/uploadImg/loadSome'
export default {
  props: {
    affix: {
      type: Boolean,
      default: false
    },
    dragable: {
      type: Boolean,
      default: false
    },
    oss: {
      type: Boolean,
      default: false
    },
    defaultItem: {
      type: Object,
      default: function () {
        return {
          url: 'url',
          id: 'id',
          item: '',
          name: 'name',
          suffix: 'suffix'
        }
      }
    },
    width: {
      type: Number,
      default: 100
    },
    value: {
      type: String,
      default: ''
    },
    imgSize: {
      type: Number,
      default: 10
    },
    maxLength: {
      type: Number,
      default: 1
    },
    imgList: {
      type: Array,
      default: () => []
    },
    accept: {
      type: String,
      default: '*'
    },
    uploadUrl: {
      type: String,
      default: ''
    },
    canPaste: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      uploadSingle,
      loadMore,
      loadSome,
      img: ''
    }
  },
  watch: {
    value(n, o) {
      console.log(n, 1)
      this.img = n
    },
    immediate: true
  },
  created() {
    this.img = this.value
  },
  methods: {
    view(url) {
      this.$emit('view', url)
    },
    getImgInfo(v) {
      this.$emit('getImgInfo', v)
    },
    getName(v) {
      this.$emit('getName', v)
      this.$emit('input', this.img)
    }
  }
}
</script>
